<template>
    <div class="Login">
        <div class="login_Content">
            <div class="login__content_menu">
                <ul>
                    <div v-if="MenuLabel===0|| MenuLabel===1" style="width: 100%;height: 100%;display: flex;align-items: center;">
                        <li v-for="(item,index) in MenuList" :key="index" @click="MenuClick(item,index)">
                        <span :class="MenuLabel===index?'Click_sty':''">{{item.title}}</span>
                    </li>
                    </div>
                </ul>
            </div>
            <div class="login_box">
                <AccountLogin v-if="MenuLabel===0"></AccountLogin>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:"Login",
    components:{
        AccountLogin:()=>import("./Account_login.vue"),
    },
    data(){
        return{
            MenuList:[
                {
                    title:"账号登录",
                    label:"account"
                }
            ],
            MenuLabel:0
        }
    },
    methods:{
        MenuClick(item,index){
            this.MenuLabel = index
        },
        NouserClick(type){
            this.MenuLabel = type
        }
    }
}

</script>

<style lang="less" scoped>
.Login{
    width: 100%;
    height: 100%;
    background: url("../../assets/bgimg/login_bac.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    .login_Content{
        width: 400px;
        max-height: 450px;
        min-height: 300px;
        background-color: #fff;
        position: absolute;
        right: 15%;
        top: 30%;
        border-radius: 10px;
        .login__content_menu{
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #f0f0f7;
            ul{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                li{
                    flex: 1;
                    text-align: center;
                    span{
                        font-size: 18px;
                        &:hover{
                            cursor: pointer;
                        }
                    }
                    .Click_sty{
                        border-bottom: 5px solid skyblue;
                        font-weight: 600;
                    }
                }
            }
        }
        .login_box{
            width: 100%;
            min-height: 200px;
        }
        .login_other{
            width: 98%;
            height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
    }
}
@media screen and (max-width: 550px) {
    .login_Content{
        width: 100% !important;
        min-width: 300px;
        right:0 !important;
        top:120px !important;
    }
}
</style>